<template>
  <!-- v-bind 改变选择器的属性-->
  <h1>v-bind 改变ID选择器的名称</h1>
  <p v-bind:id="id">v-bind绑定的id是d1</p>
  <button @click="id='d2'">点击改变id的属性名</button>
  <button @click="onClick">点击改变id的属性名two</button>
</template>
<script setup>
// 如果属性要动态改变 那么就需要使用ref进行响应式
import {ref} from "vue"
const id = ref("d1")
const imgurl ="https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/276479/21/23354/184371/6801c03dF77c7ce14/0bb46e0705cabc9b.jpg"

const onClick = () => { 
  //响应式 ref赋值是 .value 赋值方式
  id.value="d2"
}

</script>
<style scoped>
#d1{
  font-size: 20px;
  color: royalblue;
}
#d2{
  font-size: 30px;
  color: red;
  background-color: violet;
}
</style>